<template>
  <div class="kg-push w-full">
    <header class="kg-push-header">推送给我</header>
    <div class="kg-push-list h-[272px]" v-if="shareList.length">
      <div
        class="kg-push-item flex items-center my-4"
        v-for="share in shareList"
        :key="share.id"
      >
        <div class="push-state" :class="share.isRead != 1 ? 'read' : 'unread'">
          {{ share.isRead === "1" ? "已读" : "未读" }}
        </div>
        <div
          @click="handleShare(share)"
          class="collect ml-2 flex-1 cursor-pointer text-[#2B1DFF]"
        >
          {{ share.name }}
        </div>
      </div>
    </div>
    <EmptyComp v-else></EmptyComp>
    <div class="flex justify-end my-2">
      <el-pagination
        v-model:current-page="currentPage"
        :background="false"
        :pager-count="5"
        :page-size="5"
        layout=" prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getShareListApi, shareIsreadApi } from "@/api/kgKnowledgePortal/index";
import { useRouter } from "vue-router";
const router = useRouter();
defineOptions({
  name: "kg-push",
});
const userInfo = JSON.parse(sessionStorage.getItem("sola_user_info"));
const userId = userInfo.user_id;
onMounted(() => {
  getShareList();
});
const currentPage = ref(1);
const total = ref(0);
const handleCurrentChange = () => {
  getShareList();
};
const shareList = ref([]);

const getShareList = async () => {
  let params = {
    uid: userId,
    current: currentPage.value,
    size: 5,
  };
  let { code, data } = await getShareListApi(params);
  console.log(data, 555);
  if (code === 200) {
    shareList.value = data.records;
    total.value = data.total;
  }
};
const handleShare = async (share) => {
  await shareIsreadApi({ id: share.id });

  router.push({
    path: "/kgArchives/index",
    query: {
      vid: share.vid,
    },
  });
};
</script>

<style scoped lang="scss">
.kg-push {
  padding: 16px;
  border: 1px solid #dcdde2;
  border-radius: 4px;

  .kg-push-header {
    height: 24px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #2b1dff;
  }

  .kg-push-item {
    line-height: 32px;
  }

  .push-state {
    width: 44px;
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    border-radius: 0 8px;
  }

  .push-state.read {
    color: #e78a1d;
    background: #fdf6ed;
    border: 1px solid #e78a1d;
  }

  .push-state.unread {
    color: #7f8a9b;
    background: #fbfbfb;
    border: 1px solid #bfbfbf;
  }
}
</style>
